<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block data-th-replace="/adminlte/base::base-head"></th:block>
<link rel="stylesheet" href="/plugins/datatables-bs4/css/dataTables.bootstrap4.css">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="modal fade" id="dialog-menu-add">
   <div class="modal-dialog">
       <div class="modal-content" style="border-radius:5px; margin-top: 10%; border-radius: 5px;">
       	<div class="modal-header">
       		<h4 class="modal-title">新增菜单</h4>
       		<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
		<form role="form" action="/menus" method="post" data-dialog-close="#dialog-menu-add">
			<div class="modal-body">
				<div class="form-group">
					<label><span class="text-red">*</span> 菜单名称</label> <input type="text" class="form-control" name="name" placeholder="菜单名称" autofocus="autofocus">
				</div>
				<div class="form-group">
                    <label><span class="text-red">*</span> 菜单类型</label> <input type="text" class="form-control" placeholder="菜单类型" name="type">
                </div>
				<div class="form-group">
					<label>菜单图标</label> <input type="text" class="form-control" placeholder="菜单图标" name="icon">
				</div>
				<div class="form-group">
					<label>菜单排序</label> <input type="text" class="form-control" placeholder="菜单排序" name="sort">
				</div>
				<div class="form-group">
					<label>菜单地址</label> <input type="text" class="form-control" placeholder="菜单地址" name="href">
				</div>
				<div class="form-group">
					<label>请选择一个父菜单</label>
					<select class="selectpicker show-tick form-control" data-live-search="true" name="parentId" data-style="btn-info">
						<option th:value="0">无</option>
					    <option data-th-each="menu:${menuList}" th:if="${StringUtils.isEmpty(menu.href)}" th:utext="${menu.name}" th:value="${menu.id}"></option>
					</select>
				</div>
			</div>
			<div class="modal-footer">
				<button class="btn btn-default float-left" data-dismiss="modal" style="width: 100px" type="button">取消</button>
                <button class="btn btn-success float-right" style="width: 100px" type="submit">确定</button>
				</div>
			</form>
        </div>
    </div>
</div>
<div class="wrapper">
<th:block data-th-replace="/adminlte/base::base-navbar"></th:block>
<th:block data-th-replace="/adminlte/base::base-main-sidebar"></th:block>
<div class="content-wrapper">
	<th:block data-th-replace="/adminlte/base::base-content-header"></th:block>
	<section class="content container-fluid">
      <div class="card">
            <div class="card-header">
            	<div class="row" style="margin: 10px 10px 0px 0px;">
	              <button class="btn btn-app" data-dialog="show" data-url="#dialog-menu-add">
	                <i class="fas fa-plus text-blue"></i> 新增菜单
	              </button>
            	</div>
            </div>
            <div class="card-body">
            	<div class="table-responsive">
	              <table id="menu-table" class="table table-bordered table-hover" data-url="/menus/">
	              	<colgroup>
	              		<col width="80"/>
	              		<col width="130"/>
	              		<col width="130"/>
	              		<col width="120"/>
	              		<col />
	              		<col width="130"/>
	              		<col width="80"/>
	              		<col width="80"/>
	              	</colgroup>
	                <thead>
		                <tr>
							<th>排序</th>
							<th>菜单名称</th>
							<th>菜单类型</th>
							<th>图标</th>
							<th>地址</th>
							<th>父菜单</th>
							<th>状态</th>
							<th>操作</th>
		                </tr>
	                </thead>
	                <tbody>
	                	<tr data-th-each="menu : ${menuList}" th:data-key="${menu.id}">
							<td data-th-utext="${menu.sort}" data-col-name="sort" contenteditable="true">排序</td>
							<td data-th-utext="${menu.name}" data-col-name="name" contenteditable="true">角色名称</td>
							<td data-th-utext="${menu.type}" data-col-name="type" contenteditable="true">角色名称</td>
							<td data-th-utext="${menu.icon}" data-col-name="icon" contenteditable="true">角色描述</td>
							<td data-th-utext="${menu.href}" data-col-name="href" contenteditable="true">角色描述</td>
							<td th:with="name=${menuUtils.getNameById(menu.parentId)}" data-th-utext="${name==null?'':name}">角色描述</td>
							<td data-th-utext="${menu.enable?'启用':'禁用'}">角色描述</td>
							<td class="td-manage">
								<a data-dialog="confirm" data-method="put" data-url="/menus" th:data-obj-id="${menu.id}" th:data-obj-enable="${!menu.enable}" 
									th:data-dialog-t-msg="${menu.enable?'您确定要停用该菜单吗？':'您确定要启用该菜单吗？'}"  data-th-title="${menu.enable?'停用':'启用'}">
									<i th:class="${'fas '+(menu.enable?'fa-arrow-down':'fa-arrow-up')}" style="margin-left: 10px;"></i>
								</a>
								<a title="删除" th:data-path="${menu.id}" data-dialog="confirm" data-method="delete" data-url="/menus/" data-dialog-t-msg="您确定要删除当前菜单吗？" >
									<i class="fas fa-trash text-blue" style="margin-left: 10px;"></i>
								</a>
							</td>
						</tr>
	                </tbody>
	              </table>
            	</div>
            </div>
     	</div>
	</section>
</div>
<th:block data-th-replace="/adminlte/base::base-footer"></th:block>
<th:block data-th-replace="/adminlte/base::base-control-sidebar"></th:block>
</div>
<script src="/plugins/datatables/jquery.dataTables.js"></script>
<script src="/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>
<script src="/kaibes/js/table-data.js"></script>
<script src="/kaibes/js/table-update.js"></script>
<script type="text/javascript">
	dataTable(0, [1, 2, 4, 5, 6, 7]);
</script>
</body>
</html>